<template>
    <a-form @keypress.enter="handleSearch">
        <flexbox wrap="wrap">
            <flexbox class="margin-r-16">
                <span>产线/产品：</span>
                <h-cascader :change-on-select="true" placeholder="请选择" :options="treeData" labelField="catalogName" valueField="catalogCode" show-search childrenField="subNodes" ref="cascaderRef" @change="handleCascaderChange"></h-cascader>
            </flexbox>
            <flexbox class="margin-r-16">
                <span class="margin-r-16">是否对接jira：</span>
                <a-select v-model:value="form.isConnectJira" style="width: 60px" allowClear class="margin-r-8">
                    <a-select-option key="1">是</a-select-option>
                    <a-select-option key="0">否</a-select-option>
                </a-select>
            </flexbox>

            <flexbox class="margin-r-16">
                <span class="margin-r-16">是否外部系统：</span>
                <a-select v-model:value="form.isOutsideSystem" style="width: 60px" allowClear class="margin-r-8">
                    <a-select-option key="1">是</a-select-option>
                    <a-select-option key="0">否</a-select-option>
                </a-select>
            </flexbox>
            <flexbox class="margin-r-16">
                <HSuggestInput v-model:value="form.systemName" allowClear placeholder="请输入系统名称关键字" @change="handleSearch" />
            </flexbox>

            <flexbox justify="flex-end" style="flex: 1">
                <a-button type="primary" @click="handleSearch">搜索</a-button>
                <a-button class="margin-l-8" @click="handleReset">重置</a-button>
            </flexbox>
        </flexbox>
    </a-form>
</template>

<script lang="ts">
import api from '@/api';
import { useSearchHistory } from '@/hooks/common/useSearchHistory';
import { deepClone } from '@/utils/util';
import { HCascader, HSuggestInput } from '@/components';
import { defineComponent, reactive, toRefs, ref, unref } from 'vue';
export default defineComponent({
    components: {
        HCascader,
        HSuggestInput
    },
    emits: ['change'],
    setup(_, { emit }) {
        const { saveHistory } = useSearchHistory();
        const cascaderRef = ref<any>();
        const state = reactive<any>({
            form: {
                isConnectJira: null,
                isOutsideSystem: null,
                catalogCode: null,
                systemName: ''
            },
            treeData: []
        });

        const handleSearch = () => {
            if (state.form.systemName) {
                saveHistory(state.form.systemName);
            }
            emit('change', {
                ...state.form
            });
        };
        const handleReset = () => {
            state.form = {
                isConnectJira: null,
                isOutsideSystem: null,
                catalogCode: null,
                systemName: ''
            };
            unref(cascaderRef).handleClear();
            handleSearch();
        };
        const transformDataByFlatProperty = (data, fields = { keyField: 'node', childrenField: 'subNodes' }) => {
            const { keyField, childrenField } = fields;
            data.forEach((item, index) => {
                data[index] = {
                    ...data[index],
                    ...data[index][keyField],
                    catalogName: data[index][keyField].catalogName
                };
                if (item[childrenField] && item[childrenField].length) {
                    data[index][childrenField] = transformDataByFlatProperty(item[childrenField], fields);
                } else {
                    data[index][childrenField] = null;
                }
            });
            return data;
        };
        const handleCascaderChange = ({ nodeArr }) => {
            state.form.catalogCode = nodeArr[nodeArr.length - 1];
        };
        // tab列表
        const getTreeData = async () => {
            const query = {
                type: 2
            };
            const { success, moule } = await api.portalControlModel.getSystemProductCatalogTreeData(query);
            if (success) {
                if (moule) {
                    state.treeData = transformDataByFlatProperty(deepClone(JSON.parse(moule)));
                } else {
                    state.isEmpty = true;
                }
            }
        };
        getTreeData();

        return {
            cascaderRef,
            ...toRefs(state),
            handleSearch,
            handleReset,
            handleCascaderChange
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-select-selector) {
    height: 31px !important;
}
</style>